<template>
  <div class="app-container">
    <div class="search-container">
      <el-form :model="searchParamChart" :inline="true" label-width="67px">
        <el-form-item label="项目">
          <el-select
            v-model="searchParamChart.projectId"
            placeholder="请选择项目"
            clearable
            filterable
            @change="projectChange"
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.projectCode"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工序">
          <el-select
            v-model="searchParamChart.processId"
            placeholder="请选择工序"
            clearable
            :disabled="!searchParamChart.projectId"
            filterable
            @change="processChange"
          >
            <el-option
              v-for="item in processList"
              :key="item.id"
              :label="item.processCode"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备">
          <el-select
            v-model="searchParamChart.equipId"
            placeholder="请选择设备"
            clearable
            filterable
            :disabled="!searchParamChart.processId"
            @change="equipChange"
          >
            <el-option
              v-for="item in equipList"
              :key="item.id"
              :label="item.equipCode"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="产品型号">
          <el-select
            v-model="searchParamChart.productId"
            placeholder="请选择产品型号"
            clearable
            filterable
            @change="productChange"
          >
            <el-option
              v-for="item in productList"
              :key="item.id"
              :label="item.productCode"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检具类型">
          <el-select
            v-model="searchParamChart.gageEquipToolKind"
            placeholder="请选择量检具类型"
            clearable
            @change="toolKindChange"
          >
            <el-option
              v-for="item in useDictionary('InspectionToolKind')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检具设备">
          <el-select
            v-model="searchParamChart.gageEquipCode"
            placeholder="请选择检具设备"
            clearable
            filterable
            :disabled="!searchParamChart.gageEquipToolKind"
          >
            <el-option
              v-for="item in gageEquipList"
              :key="item.toolCode"
              :label="item.toolCode"
              :value="item.toolCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="特性项">
          <el-select
            v-model="searchParamChart.specificId"
            placeholder="请选择特性项"
            clearable
            filterable
            :disabled="!searchParamChart.gageEquipCode"
            :loading="specificLoading"
            loading-text="加载中..."
            @change="specificChange"
          >
            <el-option
              v-for="item in specificList"
              :key="item.paramId"
              :label="item.paramName"
              :value="item.paramId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="分类">
          <el-select
            v-model="searchParamChart.classType"
            placeholder="请选择分类"
            clearable
            @change="classTypeChange"
          >
            <el-option
              v-for="item in useDictionary('characteristicType')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="后缀">
          <el-select
            v-model="searchParamChart.suffix"
            placeholder="请选择后缀"
            clearable
            :disabled="!searchParamChart.classType"
            @change="suffixChange"
          >
            <el-option
              v-for="item in useDictionary('characteristicType')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="searchHadle"
            :loading="searchLoading"
          >
            <i-ep-search v-if="!searchLoading" />
            查询
          </el-button>
          <el-button @click="resetHadle">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-row :gutter="10">
      <!-- 单值图 -->
      <el-col :lg="20" :md="20" :sm="24" class="mb-[10px]"
        ><el-card shadow="never" class="table-container">
          <div class="flex justify-between items-center title">
            <div>
              <strong>单值图</strong>
              <strong style="margin-left: 50px"
                >序号：{{ serialNumber }}</strong
              >
              <strong style="margin-left: 20px">CPK:{{ cpkNumber }}</strong>
            </div>
            <div class="text-[12px]">
              <div class="flex items-center">
                <el-checkbox
                  v-model="singleChecked"
                  label="节点显示特性值"
                  class="mr-5! h-[26px]!"
                />
                <span class="c-[#838A9D] text-[13px] lh-[26px]!">采样数量</span>
                <el-input
                  v-model="singleMinCount"
                  placeholder="请输入"
                  class="single_count_input w-[60px]! ml-[5px]!"
                >
                  <!-- <template #append>
                    <el-button
                      :icon="Search"
                      @click="getAverageData(1)"
                    /> </template
                > -->
                </el-input>
                <span>-</span>
                <el-input
                  v-model="singleMaxCount"
                  placeholder="请输入"
                  class="w-[60px]!"
                >
                  <!-- <template #append>
                    <el-button
                      :icon="Search"
                      @click="getAverageData(1)"
                      
                    /> </template
                > -->
                </el-input>
                <el-button
                  :icon="Search"
                  plain
                  type="info"
                  class="search_btn"
                  @click="getSingleData(1)"
                />
                <el-button type="primary">保存</el-button>
              </div>
            </div>
          </div>
          <!-- 加载中 -->
          <div
            v-if="singleLoading"
            v-loading="true"
            class="w-full h-[300px]"
          ></div>
          <!-- 数据为空 -->
          <div v-if="!singleLoading && !singleData?.paramId">
            <el-empty description="暂无数据" />
          </div>
          <div v-if="singleData?.paramId">
            <pcmPointLineChart
              key="1"
              id="1"
              :showName="singleChecked"
              :seriesData="singleData"
              @cpkNumberChange="cpkNumberChange"
            />
            <div class="charts_des flex justify-center text-[14px] lh-[20px]">
              <div class="flex items-center">
                <div class="mr-4 flex items-center">
                  <span class="squary red_back"></span>公差限：{{
                    showLineValue(
                      singleData?.lowerLimitValue,
                      singleData?.upperLimitValue
                    )
                  }}
                </div>
                <div class="mr-4 flex items-center">
                  <span class="squary yellow_back"></span>控制线：{{
                    showLineValue(
                      singleData?.controlDown,
                      singleData?.controlUp
                    )
                  }}
                </div>
                <div class="flex items-center">
                  <span class="squary green_back"></span>标准值：{{
                    singleData?.parameterStandards || ""
                  }}
                </div>
              </div>
            </div>
          </div>
        </el-card></el-col
      >
      <el-col :lg="4" :md="4" :sm="24" class="mb-[10px]">
        <el-card shadow="never" class="table-container">
          <el-table
            ref="dataTableRef"
            v-loading="tableLoading"
            :data="tableList"
            highlight-current-row
            border
            @current-change="handleSelectionChange"
          >
            <el-table-column
              label="序号"
              prop="index"
              min-width="20"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              label="cpk"
              prop="cpk"
              min-width="50"
              align="right"
            >
            </el-table-column>
          </el-table>

          <!-- <el-pagination
            :background="true"
            :current-page="pageable.pageNum"
            :page-size="pageable.pageSize"
            :page-sizes="[10, 25, 50, 100]"
            :total="pageable.total"
            layout="total, sizes, prev, pager, next, jumper"
            class="mt-[20px]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          /> -->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useTable, useDownload, useDictionary } from "@/utils/useTable";
import { useRouter, useRoute } from "vue-router";
import request from "@/utils/request";
import {
  getMdmproductinfosApi,
  getMdmprojectinfosApi,
  getMdminspectiontoolApi,
  getSpecificListApi,
  getMdmProcessEquipApi,
  getMdmProcessProjectApi,
} from "@/utils/commonData";
import {
  getSingleDataMock,
  dataMock,
  attachDataMock,
  showLineValue,
  getTableDataMock,
} from "./index";
import { deepClone } from "@/utils/commonHooks";
import { Search } from "@element-plus/icons-vue";
import { active } from "sortablejs";

const router = useRouter();
const route = useRoute();
defineOptions({
  name: "QMSPCMPCMMONITORINGPOINT",
  inheritAttrs: false,
});

/**
 * 工序列表获取的条件：项目不为空
 * 设备列表获取的条件：项目、工序不为空
 * 产品型号列表：无条件
 * 检具设备列表获取的条件：检具类型不为空
 * 特性值列表获取的条件：工序、设备、产品、检具不为空
 **/
const tableLoading = ref(false);

// 初始化搜索参数数据
const searchParamInitChart = {
  // 项目
  projectCode: "",
  projectId: "",
  // 工序
  processCode: "",
  processId: "",
  // 设备
  equipCode: "",
  equipId: "",
  // 产品型号
  productCode: "",
  productId: "",
  // 检具类型
  gageEquipToolKind: "",
  // 检具名称
  gageEquipCode: "",
  // 机器号
  gageEquipMarkCode: "",
  // 特性
  specificCode: "",
  specificId: "",
  classType: "",
  suffix: "",
};

// 搜索项
const searchParamChart = reactive(deepClone(searchParamInitChart));
const searchedParamChart = reactive(deepClone(searchParamInitChart));
const searchLoading = ref(false);

// 查询
async function searchHadle() {
  // console.log(searchParamChart);
  if (!searchParamChart.specificId) {
    ElMessage.error("请选择特性项");
    return;
  }
  searchLoading.value = true;

  Object.assign(searchedParamChart, { ...searchParamChart });
  const statusPromise = Promise.allSettled([getSingleData(), getTableData()]);

  const status = await statusPromise;
  console.log("status", status);
  searchLoading.value = false;
}

// 重置
function resetHadle() {
  Object.assign(searchParamChart, { ...searchParamInitChart });
  Object.assign(searchedParamChart, { ...searchParamInitChart });
  // 数据重置
  singleData.value = {};
  averageData.value = {};
  workOrderData.value = {};
  attachData.value = [];
  // 配置项重置
  singleChecked.value = true;
  singleCount.value = null;
  averageChecked.value = true;
  averageCount.value = null;
  // 加载中重置
  searchLoading.value = false;
  singleLoading.value = false;
  averageLoading.value = false;
  workOrderLoading.value = false;
  attachLoading.value = false;
}

// 通过工序查询设备列表
const equipList = ref(<any>[]);
async function getEquipList(id: string) {
  equipList.value = (await getMdmProcessEquipApi({ processId: id })) || [];
}
function equipChange(id: string) {
  if (id) {
    const current: any =
      equipList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParamChart.equipCode = current.equipCode || "";
  } else {
    searchParamChart.equipCode = "";
  }
}

// 获取工序列表
const processList = ref<any>([]);
async function getProcessList(id: string) {
  processList.value = (await getMdmProcessProjectApi({ projectId: id })) || [];
}
async function processChange(id: string) {
  searchParamChart.equipId = "";
  searchParamChart.equipCode = "";
  if (id) {
    const current: any =
      processList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParamChart.processCode = current.processCode || "";
    await getEquipList(id);
  } else {
    searchParamChart.processCode = "";
    equipList.value = [];
  }
}

// 获取项目列表
const projectList = ref<any>([]);
async function getProjectList() {
  projectList.value = (await getMdmprojectinfosApi({})) || [];
}
async function projectChange(id: string) {
  searchParamChart.equipId = "";
  searchParamChart.equipCode = "";
  searchParamChart.processId = "";
  searchParamChart.processCode = "";
  if (id) {
    const current: any =
      projectList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParamChart.projectCode = current.projectCode || "";
    await getProcessList(id);
  } else {
    searchParamChart.projectCode = "";
    equipList.value = [];
    processList.value = [];
  }
}

// 获取产品型号列表
const productList = ref<any>([]);
async function getProductList() {
  productList.value = (await getMdmproductinfosApi({})) || [];
}
function productChange(id: string) {
  if (id) {
    const current: any =
      productList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParamChart.productCode = current.productCode || "";
  } else {
    searchParamChart.productCode = "";
  }
}

// 量检具类型变化
function toolKindChange(type: string) {
  searchParamChart.gageEquipCode = "";
  searchParamChart.gageEquipMarkCode = "";
  if (type) {
    getGageEquipList(type);
  } else {
    gageEquipList.value = [];
  }
}

// 特性值变化
function specificChange(id: string) {
  if (id) {
    const current: any =
      specificList.value?.filter((e: any) => e.paramId === id)[0] ?? {};
    searchParamChart.specificCode = current.paramCode || "";
  } else {
    searchParamChart.specificCode = "";
  }
}

// 获取量检具列表
const gageEquipList = ref<any>([]);
async function getGageEquipList(type: string) {
  gageEquipList.value =
    (await getMdminspectiontoolApi({ toolKind: type })) || [];
}

// 获取特性值列表
const specificList = ref<any>([]);
const specificLoading = ref(false);
async function getSpecificList() {
  specificLoading.value = true;
  specificList.value =
    (await getSpecificListApi({
      equipId: searchParamChart.equipId,
      gageEquipMarkCode: searchParamChart.gageEquipCode,
      modelId: searchParamChart.productId,
      processId: searchParamChart.processId,
    }).finally(() => {
      specificLoading.value = false;
    })) || [];
}

// 检测必填项，筛选特性值列表
const canSelectSpecific = ref(false);
watch(
  () => searchParamChart,
  (newVal) => {
    if (
      newVal.equipCode &&
      newVal.gageEquipCode &&
      newVal.productCode &&
      newVal.processCode
    ) {
      canSelectSpecific.value = true;
      getSpecificList();
    } else {
      canSelectSpecific.value = false;
    }
  },
  {
    deep: true,
  }
);

let mm = {
  paramName: "Journal C-Diameter (bottom)",
  upperLimitValue: 515,
  lowerLimitValue: 280,
  controlDown: 290,
  controlUp: 490,
  parameterStandards: 350,
  xdataIndex: ["1", "2", "4", "6", "8", "10", "12", "14", "16", "18", "20"],
  xdata: [
    "2024-01-11 12:00",
    "2024-01-11 12:02",
    "2024-01-11 12:04",
    "2024-01-11 12:06",
    "2024-01-11 12:08",
    "2024-01-11 12:10",
    "2024-01-11 12:12",
    "2024-01-11 12:14",
    "2024-01-11 12:16",
    "2024-01-11 12:18",
    "2024-01-11 12:20",
  ],
  ydata: [250, 380, 515, 243, 280, 500, 280, 540, 243, 280, 260],
};

// 获取单值图数据
const singleCount = ref(null); // 采样数量
const singleMinCount = ref(null); // 采样数量
const singleMaxCount = ref(null); // 采样数量
const singleChecked = ref(true); // 节点是否显示特性值
const singleLoading = ref(false);
const singleData = ref<any>({});
function getSingleData(type = 0) {
  if (!searchedParamChart.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }
  if (type && !isPositiveInteger(singleMinCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  if (type && !isPositiveInteger(singleMaxCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  if (Number(singleMaxCount.value) < Number(singleMinCount.value)) {
    ElMessage.error("最大采样数量不能小于最小采样数量");
    return;
  }
  return new Promise(async (resolve, reject) => {
    singleData.value = {};
    singleLoading.value = true;
    const { data }: any = await request({
      url: "/dmpDosPcm/pcmtimingpoint/singleCurve",
      method: "post",
      data: {
        specificId: searchedParamChart.specificId,
        count: singleCount.value,
      },
    })
      .finally(() => {
        singleLoading.value = false;
      })
      .catch((e) => {
        reject(e);
      });
    let Datas = data.ydata.map((item: any) => {
      return { index: item, hh: false };
    });

    singleData.value = { ...data, xdata: data.xdata, ydata: Datas };
    // singleData.value = data;
    singleCount.value = singleData.value.count
      ? singleData.value.count
      : singleCount.value;
    resolve("单值图");
  });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}
function isPositiveInteger(value: any) {
  return /^[1-9]\d*$/.test(value);
}
// 获取均值图数据
const averageCount = ref(null); // 采样数量
const averageGroupCount = ref(null); // 均值分组测量值个数
const averageChecked = ref(true); // 节点是否显示特性值
const averageLoading = ref(false);
const averageData = ref<any>({});
function getAverageData(type = 0) {
  if (!searchedParamChart.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }
  if (type && !isPositiveInteger(averageCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  if (type && !isPositiveInteger(averageGroupCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  return new Promise(async (resolve, reject) => {
    averageData.value = {};
    averageLoading.value = true;
    const { data }: any = await request({
      url: "/dmpDosPcm/pcmtimingpoint/averageCurve",
      method: "post",
      data: {
        specificId: searchedParamChart.specificId,
        count: averageCount.value,
        groupCount: averageGroupCount.value,
      },
    })
      .finally(() => {
        averageLoading.value = false;
      })
      .catch((e) => {
        reject(e);
      });
    averageData.value = data;
    nextTick(() => {
      dataTableRef.value!.setCurrentRow(tables.value[0]);
      serialNumber.value = tables.value[0].index;
      cpkNumber.value = tables.value[0].cpk;
    });
    // 采集点数
    averageCount.value = averageData.value.count
      ? averageData.value.count
      : averageCount.value;
    // 均值采集点数
    averageGroupCount.value = averageData.value.groupCount
      ? averageData.value.groupCount
      : averageGroupCount.value;
    resolve("均值图");
  });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   averageData.value = {};
  //   averageLoading.value = true;
  //   setTimeout(() => {
  //     averageData.value = getSingleDataMock(averageCount.value);
  //     averageLoading.value = false;
  //     resolve("均值图");
  //   }, 1500);
  // });
}

// 获取工单数据
const workOrderData = ref<any>({});
const workOrderLoading = ref(false);
async function geWorkOrderData() {
  // return new Promise(async (resolve, reject) => {
  //   workOrderData.value = {};
  //   workOrderLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/mdm/mdmproductinfo/getList",
  //     method: "post",
  //     data: {
  //       id: searchedParamChart.specificId,
  //     },
  //   })
  //     .finally(() => {
  //       workOrderLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   workOrderData.value = data;
  //   resolve("工单详情");
  // });

  // 模拟
  return new Promise(async (resolve, reject) => {
    workOrderData.value = {};
    workOrderLoading.value = true;
    setTimeout(() => {
      workOrderData.value = dataMock;
      workOrderLoading.value = false;
      resolve("工单详情");
    }, 500);
  });
}

// 获取附件数据
const attachData = ref<any>([]);
const attachLoading = ref(false);
function geAttachData() {
  // return new Promise(async (resolve, reject) => {
  //   attachData.value = [];
  //   attachLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/mdm/mdmproductinfo/getList",
  //     method: "post",
  //     data: {
  //       id: searchedParamChart.specificId,
  //     },
  //   })
  //     .finally(() => {
  //       attachLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   attachData.value = data || [];
  //   resolve("附件下载");
  // });

  // 模拟
  return new Promise(async (resolve, reject) => {
    attachData.value = [];
    attachLoading.value = true;
    setTimeout(() => {
      attachData.value = attachDataMock;
      attachLoading.value = false;
      resolve("附件下载");
    }, 1000);
  });
}

const serialNumber = ref("");
const cpkNumber = ref("");

onActivated(async () => {
  // 判断是否有存储的数据
  if (localStorage.getItem("seacher") != null) {
    // 如果有说明是 跳转过来的
    // 重置搜索参数
    searchParamChart.projectId = "";
    searchParamChart.projectCode = "";
    searchParamChart.projectId = "";
    // 工序
    searchParamChart.processCode = "";
    searchParamChart.processId = "";
    // 设备
    searchParamChart.equipCode = "";
    searchParamChart.equipId = "";
    // 产品型号
    searchParamChart.productCode = "";
    searchParamChart.productId = "";
    // 检具类型
    searchParamChart.gageEquipToolKind = "";
    // 检具名称
    searchParamChart.gageEquipCode = "";
    // 机器号
    searchParamChart.gageEquipMarkCode = "";
    // 特性
    searchParamChart.specificCode = "";
    searchParamChart.specificId = "";
    searchParamChart.classType = "";
    searchParamChart.suffix = "";
    // 把跳转过来的数据赋值给搜索参数
    Object.assign(
      searchParamChart,
      JSON.parse(localStorage.getItem("seacher") || "{}")
    );
    searchParamChart.classType = String(
      JSON.parse(localStorage.getItem("seacher") || "{}").type
    );
    console.log("searchParamChart", searchParamChart);
    if (searchedParamChart.projectId) {
      projectChange(searchedParamChart.projectId);
    }
    if (searchedParamChart.processId) {
      processChange(searchedParamChart.processId);
    }
    if (searchedParamChart.equipId) {
      equipChange(searchedParamChart.equipId);
    }
    if (searchedParamChart.gageEquipToolKind) {
      toolKindChange(searchedParamChart.gageEquipToolKind);
    }
    if (searchedParamChart.productId) {
      productChange(searchedParamChart.productId);
    }
    if (searchedParamChart.specificId) {
      specificChange(searchedParamChart.specificId);
    }
    // 赋值完搜索数据 进行搜索
    searchHadle();
    // 搜索完之后，删除存储的数据
    setTimeout(() => {
      localStorage.removeItem("seacher");
    }, 200);
    // 搜索完之后，赋值序号 和cpk值数据及选中高亮点击跳转的节点
    nextTick(() => {
      dataTableRef.value!.setCurrentRow(tables.value[2]);
      serialNumber.value = tables.value[2].index;
      cpkNumber.value = tables.value[2].cpk;
    });
  }
});

// 检测必填项，筛选特性值列表

watch(
  () => searchParamChart.projectId,
  (newVal) => {
    if (searchedParamChart.projectId) {
      projectChange(searchedParamChart.projectId);
      Object.assign(
        searchParamChart,
        JSON.parse(localStorage.getItem("seacher") || "{}")
      );
    }
  },
  {
    deep: true,
  }
);
watch(
  () => searchParamChart.equipId,
  (newVal) => {
    if (searchedParamChart.equipId) {
      equipChange(searchedParamChart.equipId);
      Object.assign(
        searchParamChart,
        JSON.parse(localStorage.getItem("seacher") || "{}")
      );
    }
  },
  {
    deep: true,
  }
);
watch(
  () => searchParamChart.processId,
  (newVal) => {
    if (searchedParamChart.processId) {
      processChange(searchedParamChart.processId);
      Object.assign(
        searchParamChart,
        JSON.parse(localStorage.getItem("seacher") || "{}")
      );
    }
  },
  {
    deep: true,
  }
);

const totalMultipleSelection = ref([]);
const dataTableRef = ref();
const handleSelectionChange = async (row) => {
  if (row) {
    serialNumber.value = row.index;
    cpkNumber.value = row.cpk;
    await getSingleData();
  }
};

const classTypeChange = () => {};
const suffixChange = () => {};

// 当节点移除时 赋值数据
const cpkNumberChange = (data) => {
  cpkNumber.value = data;
};

const getSearch = () => {};

onMounted(() => {
  // 获取项目列表
  getProjectList();
  // 获取产品型号列表
  getProductList();
  // // 搜索完之后，赋值序号 和cpk值数据及选中高亮第一个节点
  // nextTick(() => {
  //   dataTableRef.value!.setCurrentRow(tables.value[0]);
  //   serialNumber.value = tables.value[0].index;
  //   cpkNumber.value = tables.value[0].cpk;
  // });
});
const tableList = ref([]);
const getTableData = async () => {
  tableLoading.value = true;
  tableList.value = await getTableDataMock();
  tableLoading.value = false;
  nextTick(() => {
    dataTableRef.value!.setCurrentRow(tableList.value[0]);
    serialNumber.value = tableList.value[0].index;
    cpkNumber.value = tableList.value[0].cpk;
  });
};
</script>
<style lang="scss" scoped>
:deep(.search-container) {
  .el-input__wrapper {
    width: 170px;
  }
}
:deep(.table-container) {
  height: 80vh;
  overflow: visible;
  .el-card__body {
    padding: 15px;
    .el-empty {
      height: 300px;
      .el-empty__image {
        width: 60px;
      }
    }
    .el-loading-spinner {
      svg {
        width: 24px;
        height: 24px;
      }
    }
    .title {
      .el-input__inner {
        height: 24px;
      }
      strong {
        color: #091e40;
        font-size: 16px;
      }
      .el-checkbox__input {
        margin-top: -3px;
      }
      .el-checkbox__label {
        font-size: 13px;
        color: #838a9d;
        padding-left: 4px;
        line-height: 26px !important;
      }
      .single_count_input {
        width: 100px;
        margin-left: 8px;
        height: 26px;
        .el-input-group__append {
          padding: 0px;
          button {
            margin: 0;
            padding: 0 7px;
          }
        }
        .el-icon {
          font-size: 20px;
          width: 20px;
          height: 20px;
        }
      }
    }
    .search_btn {
      height: 26px;
      width: 36px;
      margin-left: 4px;
      background-color: var(--el-fill-color-light);
      color: var(--el-color-info);
      .el-icon {
        width: 18px !important;
        height: 18px !important;
      }
    }
    .charts_des {
      margin-top: 5px;
      color: #838a9d;

      font-family: "DINLight";
      .squary {
        width: 14px;
        height: 14px;
        display: inline-block;
        border-radius: 3px;
        margin-right: 3px;
      }
    }
  }
}
</style>
